<!DOCTYPE html>
<!--
%%LICENSE%%
Version: %%VERSION%%
-->
<html>
<head>
    <link rel="shortcut icon" type="image/png"
        href="images/crowdlogger-logo.001.16x16.png"/>
    <title>Download %%PROJECT_NAME%%</title>
    <link rel="stylesheet" type="text/css" href="style/style.css">
    <script src="lib/jquery.min.js"></script>

<style>
    .note {
        color: red;
    }

    li {
        margin-bottom: 15px;
    }
</style>
<script>
function extractVersion(browserName){
    return navigator.userAgent.match(new RegExp(browserName+'/([\\d]+)'));
}

jQuery(document).ready(function(){
    var chromeVersion = extractVersion('Chrome');
    var firefoxVersion = extractVersion('Firefox');

    console.log(chromeVersion);
    console.log(firefoxVersion);

    if( chromeVersion ){
        jQuery('#firefox').hide();
        if( chromeVersion.length > 0 && parseInt(chromeVersion[1]) < %%CHROME_MIN_VERSION%%){
            jQuery('#chrome-download').attr('disabled', 'disabled');
            jQuery('#chrome-note').show();
            jQuery('#no-ff-or-chrome').show();
        }
    } else if( firefoxVersion ){
        jQuery('#chrome').hide();
        if( firefoxVersion.length > 0 && parseInt(firefoxVersion[1]) < %%FF_MIN_VERSION%%){
            jQuery('#ff-download').attr('disabled', 'disabled');
            jQuery('#ff-note').show();
            jQuery('#no-ff-or-chrome').show();
        }
    } else {
        jQuery('#no-ff-or-chrome').show();
        jQuery('#firefox').hide();
        jQuery('#chrome').hide();
    }
});


</script>
</head>
<body>
<div class="bodyWrapper">

    <!-- The header. -->
    <div class="header">
        <div class="title">
            <span class="logo-version">version %%VERSION%%</span>
            <img class="logo" src="images/crowdlogger-logo.002.png"/>
            <span class="titleMain">Download</span><br/>
        </div>

        <div id="iframe" class="menu-frame">
           <iframe src="menu.html" marginheight="0" width="100%" 
           frameborder="0" scrolling="no" height="70px">
           </iframe>
        </div>
        <div id="share-iframe" class="share-iframe">
           <iframe src="share.html" marginheight="0" width="100%" 
           frameborder="0" scrolling="no" height="80px">
           </iframe>
        </div>
    </div>

    <!-- Brings us down to just below the title. -->
    <div style="clear: both;"></div>
    <div class="headerBuffer"></div>

<span class="note hidden" id="no-ff-or-chrome">
To use %%PROJECT_NAME%% on your desktop or laptop, you must first have either
<a href="http://www.google.com/chrome/">Google Chrome (v%%CHROME_MIN_VERSION%%+)</a> or <a href="http://www.mozilla.com/en-US/firefox/new/">Firefox (v%%FF_MIN_VERSION%%+)</a> installed.
</span>

<p>
To install %%PROJECT_NAME%%, follow the instructions below. After installing, the extension will open a configuration wizard that will guide you through setting things up.
</p>

<div id="firefox">
<h2>Installing %%PROJECT_NAME%% for Firefox</h2>

<span id="chrome-note" class="note hidden">
%%PROJECT_NAME%% only works from Firefox v.%%FF_MIN_VERSION%% or higher.
</span>

<p>
Click the button and the installation will progress automatically:
<button class="cl-button" id="ff-download" onclick="if(typeof(InstallTrigger)!='undefined') {var InstallXPI = {'%%PROJECT_NAME%% Installation':'updates/latest/%%EXTENSION_FILE_NAME%%.xpi?v=%%VERSION%%'}; InstallTrigger.install(InstallXPI); return false;} else { location.href='updates/latest/%%EXTENSION_FILE_NAME%%.xpi?v=%%VERSION%%'; return false; }" type=" application/x-xpinstall">Download for Firefox</button>
</p>
</div>



<div id="chrome">
<h2>Installing %%PROJECT_NAME%% for Chrome</h2>

<span id="chrome-note" class="note hidden">
%%PROJECT_NAME%% only works from Chrome v.%%MIN_CHROME_VERSION%% or higher.
</span>

<p>
Installation for Chrome requires a few steps:
<ol>
  <li>Download the %%PROJECT_NAME%% extension:
<button class="cl-button" id="chrome-download" onclick="location.href='updates/latest/%%EXTENSION_FILE_NAME%%.crx?v=%%VERSION%%'; return false;" type=" application/x-chrome-extension">Download for Chrome</button>

  <li>Navigate to the download (called <code>%%EXTENSION_FILE_NAME%%.crx</code>) in your downloads folder using, e.g.,  Windows Explorer (on Windows), Finder (on OSX), or whatever you'd like on Linux.

  <li>In Chrome, open the Extensions page by clicking on the configuration icon on the far right side of the navigation bar and choosing "Tools"&rarr;"Extensions", as shown below.
    <div align="center"><img src="images/chrome-extensions-menu.png" width="65%"/></div>

  <li>Drag the <code>%%EXTENSION_FILE_NAME%%.crx</code> download from you Downloads folder onto the Chrome Extensions page, as shown below.
    <div align="center"><img src="images/chrome-install.png" width="65%"/></div>
</ol>




    <!-- Everything below here is for the footer. -->
    <div class="buffer">
    </div>

<div class="copyright-frame">
   <iframe width="100%" src="copyright.html" scrolling=no 
           frameborder=0 marginheight=0 height=40px>
   </iframe>
</div>

</div>

<div class="emptyFooter">
</div>
</body>
</html>
